<template>
  <div>
    <el-container>
      <el-main>
        <el-tabs :data="tableData" type="border-card">
          <el-tab-pane label="新增计费项目">
            <el-form status-icon ref="tableData" label-width="120px" class="demo-tableData">
              <div class="row" style="width: 100%;display: flex;flex-wrap:wrap">
                <el-form-item label="计算项目名称" style="width: 44%;">
                  <el-input size="small" v-model="tableData.payname"></el-input>
                </el-form-item>
                <el-form-item label="项目优先级" style="width: 44%;">
                  <el-input size="small" v-model="tableData.paylevel"></el-input>
                </el-form-item>
                <el-form-item label="项目用量/时长" style="width: 44%;">
                  <el-input size="small" v-model="tableData.paynum"></el-input>
                </el-form-item>
                <el-form-item label="项目价格" style="width: 44%;">
                  <el-input size="small" v-model="tableData.paymoney"></el-input>
                </el-form-item>
                <el-form-item label="通知状态" style="width: 44%;">
                  <el-select v-model="value" placeholder="请选择" style="width: 100%;">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="计费目录" style="width: 44%;">
                  <el-select v-model="value1" placeholder="请选择状态" style="width: 100%;">
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value1"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="通知内容" style="width: 44%;">
                  <el-input size="small" v-model="tableData.paycontent"></el-input>
                </el-form-item>
              </div>
            </el-form>
            <div
              class="success-button"
              style="z-index:100;position:fixed;top:27%;right:20px;display:flex;flex-direction:column;align-items:center"
            >
              <el-button type="primary" size="small" @click="fanhui" style="margin-top: 10px;">返回</el-button>
              <el-button
                type="primary"
                size="small"
                style="margin-top: 10px;"
                @click="getTableData"
              >保存</el-button>
              <el-button
                type="primary"
                size="small"
                @click="getTableData"
                style="margin-top: 10px;"
              >提交</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>
    
<script>
import Cookies from "js-cookie";
export default {
  data() {
    return {
      tableData: {
        payname: "",
        paylevel: "",
        paynum: "",
        paymoney: "",
        paystatus: "",
        paycontent: "",
        coststatus: ""
      },
      sendInfo: {
        id: "",
        token: ""
      },
      options: [
        { label: "已通知", value: 1 },
        { label: "未通知", value: 2 }
      ],
      value: "",
      options1: [
        { label: "电费目录", value1: 1 },
        { label: "水费固定月目录", value1: 2 },
        { label: "水费按量目录", value1: 3 },
        { label: "天然气目录", value1: 4 },
        { label: "物业费目录", value1: 5 },
        { label: "宽带费目录", value1: 6 }
      ],
      value1: ""
    };
  },
  methods: {
    fanhui() {
      this.$router.push({
        path: "/charging/type"
      });
    },
    async getTableData() {
      const { data: res } = await this.axios.post(
        "http://community.byesame.com/cost/addCostData",
        {
          payname: this.tableData.payname,
          paylevel: this.tableData.paylevel,
          paynum: this.tableData.paynum,
          paymoney: this.tableData.paymoney,
          paystatus: this.value1,
          paycontent: this.tableData.paycontent,
          coststatus: this.value,
          token:
            "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjEyLCJ1c2VybmFtZSI6ImFkbWluIiwiZW1haWwiOiJ3ZSIsImhlYWQiOiIyMDI0MDMwODE5Mzc1Nzg3MTE4OTAuanBnIiwidHlwZSI6IjEiLCJpYXQiOjE3MTE0OTk5NzEsImV4cCI6MTcxMTU4NjM3MX0.r87Oc_3733o5u3k5U9DVYuV9jRzafBscx1cTjLTvDOI"
        }
      );
    }
  },
  mounted() {
    this.Token = Cookies.get("Admin-Token");
  },
  components: {}
};
</script>
    
    <style lang="scss" scoped>
.el-container {
  background-color: rgb(240, 240, 240);
}
.el-main {
  margin: 1.3% 1%;
  padding: 0;
  background-color: #fff;
}
</style>